<template>

  <NLayout has-sider wh-full>
    <section style="padding: 12px;height: 100%;" bg-hex-f5f6fb dark:bg-hex-101014>
      <NLayoutSider content-style="padding: 24px;" :collapsed-width="0" :width="650" show-trigger="arrow-circle"
                    style="border-radius: 10px;height: 100%;box-shadow: inset 0 0 .375rem rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 .375rem rgba(0, 0, 0, .3);">
        <n-card title="日期"  :segmented="{content: true,footer: 'soft'}" style="min-height: 710px;">
          <template #header-extra>
            <NSelect
                style="width: 200px;float: right"
                :options="data.option_space"
                clearable
                placeholder="请选择门店"
                v-model:value="data.space_id"
                @update:value="onSpaceChange"
            />&nbsp;
          </template>
          <template #footer>

            <n-calendar
                v-model:value="selectedDate"
                #="{ year, month, date }"
                :is-date-disabled="isDateDisabled"
                @update:value="handleUpdateValue"
                @panel-change="(panel, value) => handleChange(panel)"
                style="margin:0 10px"
                class="custom-calendar"
            >
                <div style="margin-top:5px">
                  <div v-if="getAppointmentCount(year, month, date)">
                    预约: {{ getAppointmentCount(year, month, date) }}
                  </div>

                </div>

            </n-calendar>

          </template>
        </n-card>
      </NLayoutSider>
    </section>
    <NLayoutContent >
      <section style="border-radius: 10px;height: 100%;box-shadow: inset 0 0 .375rem rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 .375rem rgba(0, 0, 0, .3);">
        <CommonPage show-footer title="预约情况">
          <n-scrollbar x-scrollable style="width: 100%;" trigger="none">
            <n-flex class="tb_row">
              <div class="tb_head">技师姓名</div>
              <div class="tb_head" v-for="item in data.head">{{item}}</div>
            </n-flex>
            <n-flex class="tb_row" v-for="item in data.designers">
              <div class="tb_head">{{item.name}}</div>

              <div class="tb_task" :style="'width:'+item2.width+'px;margin-left:'+item2.left+'px;'" v-for="item2 in item.ap_con">
                <div>{{item2.project_name}}</div>
                <div style="font-size: 12px">{{item2.user_name}}</div>
                <div style="font-size: 10px">{{item2.user_phone}}</div>

              </div>
            </n-flex>

          </n-scrollbar>
        </CommonPage>

      </section>
    </NLayoutContent>
  </NLayout>


</template>

<script setup>
import {NDatePicker, NLayout, NLayoutContent, NLayoutSider, NSelect, NTag} from 'naive-ui';
import { useMessage } from 'naive-ui'
import CommonPage from "@/components/page/CommonPage.vue";
import {onMounted,ref} from "vue";
import api from "@/api";
const message = useMessage()
function handleUpdateValue(e) {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始，需加1并补充0
  const day = String(date.getDate()).padStart(2, '0');  // 补充0确保两位数字
  const formattedDate = `${year}-${month}-${day}`;
  data.select_date = formattedDate
  get_appointment()
}
const appointmentMap = ref({})
const data = reactive({
  designers:[],
  head:[],
  space_id:1,
  option_space:[],
  select_date:"",
  select_month:"",
  month3data:[],
});


onMounted(() => {
  api.getSpaceList().then((res) => {
    data.option_space = res.data
    data.space_id = res.data[0].value
    re_load()
  })

})

function onSpaceChange(){
  message.success("切换门店")
  re_load()
}

function re_load(){
  get_3month()
  get_appointment()
}

function get_appointment(){
  api.getAllAppointment({
    date: data.select_date,
    space_id:data.space_id
  }).then((res) =>{
    data.head = res.data.head
    data.designers = res.data.list
  })
}

function handleChange(panel){
  console.log(panel)
  let year = panel.year
  let month = panel.month
  if(month<10){
    data.select_month =year+"-0"+month
  }else{
    data.select_month =year+"-"+month
  }
  get_3month()
}

function get_3month(){
  api.get3MonthAppointment({
    month:data.select_month,
    space_id:data.space_id
  }).then((res) => {
    data.month3data = res.data

    const map = {};
    res.data.forEach((item) => {
      map[item.date] = item.nums;
    });
    appointmentMap.value = map;

  })
}







    // 根据日期获取预约数量
    const getAppointmentCount = (year, month, date) => {
      const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
      if(appointmentMap.value[dateStr]>0){
        console.log("取得预约"+appointmentMap.value[dateStr])
      }
      return appointmentMap.value[dateStr] || 0;
    };


</script>

<style>
.custom-calendar {
  width: 100%;  /* 设置每个日期格子的宽度 */
  height: 400px;  /* 设置每个日期格子的高度 */
}
.tb_row{
  margin-bottom: 5px;
  gap:0px !important;
  width: 2200px;
  border:1px solid #eee;
  padding: 5px;
}
.tb_head{
  width:80px;
  text-align: center;
  border-right:1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb_task{
  min-width: 80px;
  background: #536e95;
  color:white;
  text-align: center;
  border-radius: 5px;
  margin:2px;
}
</style>